let $ = layui.jquery;

export default class UpdateMovie {
  constructor(data) {
    this.render();
    this.handle(data);

  }
  render() {
    let template = `<form class="layui-form" action="" method="post" >
        <div class="layui-form-item">
          <label class="layui-form-label">电影名</label>
          <div class="layui-input-block">
            <input type="text" name="name" required  lay-verify="required" placeholder="请输入电影名" autocomplete="off" class="layui-input">
          </div>
        </div>
    
        <div class="layui-form-item">
          <label class="layui-form-label">电影英文名</label>
          <div class="layui-input-block">
            <input type="text" name="ename" required  lay-verify="required" placeholder="请输入电影英文名" autocomplete="off" class="layui-input">
          </div>
        </div>
      
        <div class="layui-form-item">
          <label class="layui-form-label">电影类型</label>
          <div class="layui-input-block">
            <input type="radio" name="type" value="动作" title="动作" checked>
            <input type="radio" name="type" value="冒险" title="冒险">
            <input type="radio" name="type" value="科幻" title="科幻">
            <input type="radio" name="type" value="犯罪" title="犯罪">
            <input type="radio" name="type" value="动画" title="动画">
            <input type="radio" name="type" value="爱情" title="爱情">
            <input type="radio" name="type" value="悬疑" title="悬疑">
          </div>
        </div>
    
        <div class="layui-form-item">
        <label class="layui-form-label">电影上映地区</label>
        <div class="layui-input-block">
          <input type="radio" name="area" value="中国" title="中国" checked>
          <input type="radio" name="area" value="日本" title="日本">
          <input type="radio" name="area" value="韩国" title="韩国">
          <input type="radio" name="area" value="美国" title="美国">
          <input type="radio" name="area" value="欧洲" title="欧洲">
          <input type="radio" name="area value="印度" title="印度">
          <input type="radio" name="area" value="泰国" title="泰国">
        </div>
      </div>
    
      <div class="layui-form-item">
      <label class="layui-form-label">电影时长</label>
        <div class="layui-input-block">
          <input type="text" name="time" required  lay-verify="required" placeholder="请输入电影时长" autocomplete="off" class="layui-input">
        </div>
      </div>
    
    <div class="layui-form-item">
      <label class="layui-form-label">电影上映时间</label>
      <div class="layui-input-block">
        <input type="text" name="upDate" required  lay-verify="required" placeholder="请输入电影上映时间" autocomplete="off" class="layui-input">
      </div>
    </div>
    
    <div class="layui-form-item">
      <label class="layui-form-label">电影评分</label>
      <div class="layui-input-block">
        <input type="text" name="score" required  lay-verify="required" placeholder="请输入电影评分" autocomplete="off" class="layui-input">
      </div>
    </div>


    <div class="layui-form-item">
    <label class="layui-form-label">电影票房</label>
    <div class="layui-input-block">
      <input type="text" name="count" required  lay-verify="required" placeholder="请输入电影票房" autocomplete="off" class="layui-input">
    </div>
  </div>
    
    
    
    <div class="layui-form-item">
      <label class="layui-form-label">剧情简介</label>
      <div class="layui-input-block">
        <input type="text" name="intro" required  lay-verify="required" placeholder="请输入电影简介" autocomplete="off" class="layui-input">
      </div>
    </div>
    
    
    <div class="layui-form-item">
    <label class="layui-form-label">首页图片</label>
    <div class="layui-input-inline ">
        <div class="layui-upload">
            <button type="button" class="layui-btn" id="uploadBtn">上传图片</button>
            <div class="layui-upload-list">
                <img class="layui-upload-img" id="indexImage">
                <p id="uploadError"></p>
            </div>
            <div style="width: 95px;">
                <div class="layui-progress layui-progress-big" lay-showpercent="yes" lay-filter="demo">
                    <div class="layui-progress-bar" lay-percent=""></div>
                </div>
            </div>
        </div>
        <a name="list-progress"> </a>
        <div style="margin-top: 10px;">
        </div>
    </div>
</div>
    
    <div class="layui-form-item">
      <label class="layui-form-label">导演名</label>
      <div class="layui-input-block">
        <input type="text" name="directorName" required  lay-verify="required" placeholder="请输入导演名" autocomplete="off" class="layui-input">
      </div>
    </div>
    
    
    <div class="layui-form-item">
      <label class="layui-form-label">演员名</label>
      <div class="layui-input-block">
        <input type="text" name="actorName" required  lay-verify="required" placeholder="请输入演员名" autocomplete="off" class="layui-input">
      </div>
    </div>
    
    <div class="layui-form-item">
    <label class="layui-form-label">图集</label>
    <div class="layui-input-inline ">
        <div class="layui-upload">
            <button type="button" class="layui-btn" id="uploadImage">上传图片</button>
            <div class="layui-upload-list">
                <img class="layui-upload-img" id="images">
                <p id="uploadError"></p>
            </div>
            <div style="width: 95px;">
                <div class="layui-progress layui-progress-big" lay-showpercent="yes" lay-filter="demo">
                    <div class="layui-progress-bar" lay-percent=""></div>
                </div>
            </div>
        </div>
        <a name="list-progress"> </a>
        <div style="margin-top: 10px;">
        </div>
    </div>
</div>
    
      </form>`
    $("#updateMovieTemplate").html(template);

  }
  handle(data) {//此处的data是layui自身的data获取当前行的data

    let form = layui.form;
    let layer = layui.layer;
    let table = layui.table
    let $ = layui.jquery;
    var upload = layui.upload;
    var element = layui.element;

        // 首页上传函数方法
        function uploadMethod() {
          var uploadInst = upload.render({
            elem: '#uploadBtn'
            , url: '/api/upload' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
            , before: function (obj) {
              //预读本地文件示例，不支持ie8
              obj.preview(function (index, file, result) {
                $('#indexImage').attr('src', result); //首页图片链接（base64）
    
              });
              element.progress('demo', '0%'); //进度条复位
              layer.msg('上传中', { icon: 16, time: 0 });
            }
            , done: function (res) {
              console.log(res);
              //如果上传失败
              if (res.code > 0) {
                return layer.msg('上传失败');
              }
              //上传成功的一些操作
              //……
              $('#indexImage').attr('src', "http://127.0.0.1:3001/images/" + res.data);
    
    
    
              $('#uploadError').html(''); //置空上传失败的状态
            }
            , error: function () {
              //演示失败状态，并实现重传
              var uploadError = $('#uploadError');
              uploadError.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</ a>');
              uploadError.find('.demo-reload').on('click', function () {
                uploadInst.upload();
              });
            }
            //进度条
            , progress: function (n, elem, e) {
              element.progress('demo', n + '%'); //可配合 layui 进度条元素使用
              if (n == 100) {
                layer.msg('上传完毕', { icon: 1 });
              }
            }
          });
        }

    layer.open({
      id: "myTable",
      type: 1,
      area: ["650px", "600px"],
      content: $("#updateMovieTemplate").html(),
      btn: ["添加", "取消"],

      success: function (layero, index) {
        uploadMethod();
        

        $("input[name='name']").val(data.name);
        $("input[name='ename']").val(data.ename);

        $("input[name='type']").each(function(){
          if($(this).attr("title")===data.type){
            $(this).attr("checked",true);
          }
        });
  
  
        $("input[name='area']").each(function(){
          if($(this).attr("title")===data.area){
            $(this).attr("checked",true);
          }
        });
      

        $("input[name='time']").val(data.time);
        $("input[name='upDate']").val(data.upDate);
        $("input[name='score']").val(data.score);
        $("input[name='count']").val(data.count);
        $("input[name='intro']").val(data.intro);
       
        $("#indexImage").attr("src",data.indexImage)
        $("input[name='directorName']").val(data.director[0].name);
        $("input[name='actorName']").val(data.actor[0].name);
         // 获取图片有问题
        $("input[name='images']").val(data.images[0].image);
        form.render();
      },
      yes: function () {
        let _id = data._id;

        let name = $("input[name='name']").val();
        let ename = $("input[name='ename']").val();
        let type = $("input[name='type']:checked").val();
        let area = $("input[name='area']:checked").val();
        let time = $("input[name='time']").val();
        let upDate = $("input[name='upDate']").val();
        let score = $("input[name='score']").val();
        let count = $("input[name='count']").val();
        let intro = $("input[name='intro']").val();
        let indexImage = $("#indexImage").attr("src")
        let directorName = $("input[name='directorName']").val();
        let actorName = $("input[name='actorName']").val();
        // 有问题
        let images = $("input[name='images']").val();


        // console.log(images);
        // ajax post提交  更新数据
        $.ajax({
          type: "post",

          data: {
            _id,
            name,
            ename,
            type,
            area,
            time,
            upDate,
            score,
            count,
            intro,
            indexImage,
            directorName,
            actorName,
            images,
          },

          url: "/api/updateMovie",
          success: function (res) {

            if (res.code === 200) {
              layer.closeAll();
              table.reload("myTable", {});
              layer.msg("更新成功");

            


            } else {
              layer.msg("更新失败");
            }
          }
        })





      }

    });

  }
}